<style scoped>
.editor-theme-color .colorBox-u {
  padding-bottom: 60px;
}
.editor-theme-color .color {
  text-align: center;
}
.editor-theme-color .color .item {
  display: inline-block;
  margin: 0 6px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background-color: #000000;
  border: 2px solid #ffffff;
}
.editor-theme-color .color .cur {
  border-color: #409eff;
  opacity: 0.8;
  cursor: not-allowed;
  font-size: 18px;
}
.editor-theme-color .color .cur i {
  color: #fff !important;
}
</style>
<!--  -->
<template>
  <div class="editor-theme-color">
    <el-dialog title="主题颜色" :visible.sync="dialogShow" :modal-append-to-body="false">
      <div class="dlg-main-box colorBox-u">
        <div class="color" v-if="response && response.color">
          <span v-for="(item, index) in response.themeColor.color" :key="index"
            :class="{'item':true, 'cur': parseInt(index) === parseInt(response.color)}"
            :style="'background-color: '+item+';'" @click.stop="chooseColor(index)">
            <i class="el-icon-check" :style="'color: '+item+';'"></i>
          </span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="close">取 消</el-button>
        <el-button size="small" type="primary" @click="saveclose">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
// import PubSub from 'pubsub-js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      loading: true,
      response: {}
    }
  },
  methods: {
    show () {
      this.dialogShow = true
      this.loading = true
      this.$post('/site/get-current-theme-color', null).then(response => {
        this.response = response
        this.loading = false
      })
    },
    chooseColor (index) {
      if (parseInt(index) === parseInt(this.response.color)) {
        return
      }
      this.response.color = '' + index
    },
    close () {
      this.dialogShow = false
      this.loading = true
    },
    saveclose () {
      this.save()
      this.close()
    },
    save () {
      this.loading = true
      this.$post('/site/update-site-theme-color', {
        color: this.response.color
      }).then(response => {
        this.loading = false
        BackendjsFunctions.updateSiteThemeColor(response.color)
      })
    }
  },
  components: {
  }
}

</script>
